<template>
  <div id="list-view">
    <!-- 头部 -->
    <listview-header :playlist="playlist"></listview-header>
    <play-list :playlist="playlist"></play-list>
  </div>
</template>

<script>
import { getMusicListDetail } from '../Api/request'
import ListviewHeader from '../components/listView/ListViewHeader.vue'
import PlayList from '../components/listView/PlayList.vue'

export default {
  components: { ListviewHeader, PlayList },
  data() {
    return {
      playlist: {
        creator: {},
        tracks: []
      }
    }
  },
  mounted: async function () {
    let id = this.$route.query.id
    const { data: res } = await getMusicListDetail(id)
    this.playlist = res.playlist
    this.$store.commit('setPlayList', this.playlist.tracks)
  }
}
</script>

<style lang="less" scoped>
#list-view {
  padding: 0 0.3rem;
  width: 7.5rem;
}
</style>